<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.css">
    <script src="./js/jquery.js"></script>
    <script src="./js/bootstrap.js"></script>
    <script src="./js/vue.js"></script>
</head>

<body>
    <div class="container" id="app" style="width: 80%;margin: 80px auto;">
        <table class="table table-bordered table-hover">
            <h1 class="text-center text-info">购物车</h1>
            <thead>
                <tr class="text-danger">
                    <th class="text-center">
                        <label><input type="checkbox" v-model="allState" @change="chooseAllState()">全选</label>
                    </th class="text-center">
                    <th class="text-center">商品编号</th>
                    <th class="text-center">商品名称</th>
                    <th class="text-center">购买数量</th>
                    <th class="text-center">商品单价</th>
                    <th class="text-center">商品总价</th>
                    <th class="text-center">操作</th>
                </tr>
            </thead>
            <tbody>
                <tr class="text-center" v-for=" (v,i) in products " :key="i">
                    <td>
                        <input type="checkbox" v-model="v.state" @change="checkItem()">
                    </td>
                    <td>{{ v.id }}</td>
                    <td>{{ v.name }}</td>
                    <td style="width: 120px;">
                        <div class="input-group  input-group-sm">
                            <span class="input-group-addon" @click=" v.count>1?(v.count-=1):removeDate(i)  ">-</span>
                            <input type="text" class="form-control" style="text-align: center;" :value=" v.count ">
                            <span class="input-group-addon" @click=" v.count+=1 ">+</span>
                        </div>
                    </td>
                    <td>￥{{v.price}}</td>
                    <td>￥{{v.price*v.count}}</td>
                    <td>
                        <button class="btn btn-danger btn-sm" @click="removeDate(i)">删除</button>
                    </td>
                </tr>
            </tbody>
            <tfoot>
                <tr class="text-center text-muted" v-if="products.length==0">
                    <td colspan="7">暂无商品……</td>
                </tr>
                <tr class="text-center text-muted" v-if="products.length!=0">
                    <td></td>
                    <td colspan="2">已选择:{{getCount}}个</td>
                    <td colspan="2">合计:{{getSum}}元</td>
                    <td colspan="2">
                        <button class="btn btn-danger btn-sm" @click="removeDate(-1)">清空</button>
                        <button class="btn btn-primary btn-sm" @click="removeDate(-2)">下单</button>
                    </td>
                </tr>
            </tfoot>
        </table>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            products: [
                { id: 10001, name: "小米手机", count: 1, price: 3200, state: false },
                { id: 10002, name: "华为电脑", count: 1, price: 6400, state: false },
                { id: 10003, name: "晨光铅笔*12", count: 1, price: 16, state: false },
                { id: 10004, name: "羽绒服", count: 1, price: 600, state: false }
            ],
            allState:false
        },
        methods: {
            checkItem(){
                this.allState = this.products.length > 0;
                for (let i = 0; i < this.products.length; i++){
                    if(!this.products[i].state){
                        this.allState = false;
                        return;
                    }
                }
            },
            chooseAllState(){
                for(let i = 0; i < this.products.length; i++){
                    this.products[i].state = this.allState;
                }
            },
            removeDate(index){
                if(index >= 0){
                    this.products.splice(index, 1);
                } else if (index == -1 ){
                    this.products = [];
                } else {
                    for (let i = this.products.length-1; i>=0 ; i--){
                        if(this.products[i].state){
                            this.products.splice(i,1);
                        }
                    }
                }
                this.checkItem();
            }
        },
        computed: {
            getCount(){
                let tempCount = 0;
                this.products.forEach((item) => {
                    if(item.state){
                        tempCount +=1;
                    }
                });
                return tempCount;
            },
            getSum(){
                let tempSum = 0;
                this.products.forEach((item) => {
                    if(item.state){
                        tempSum += item.price*item.count;
                    }
                });
                return tempSum;
            }
        },
    })

</script>

</html>